<template>
    <view class="telephone">
        <view class="topBox">
            <view>
                部门电话
            </view>
            <image src="../static/telephone.png"></image>
        </view>
        <view class="phoneBox">
            <u--input placeholder="请输入关键词查询" v-model="searvhValue" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
                @blur="search()"></u--input>
            <view class="listBox">

                <view class="phoneItem" v-for="(item,index) in list" :key="index" @click="makePhoneCallM(item.windowPhone)">
                    <view class="textBox">
                        <view>
                            {{item.windowName}}
                        </view>
                        <view>
                            {{item.windowPhone}}
                        </view>
                    </view>
                    <image class="circleArrow" src="../static/phone.png"></image>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isShow: false, //搜素显隐
            list: [],
            params: {
                pageNum: 1,
                pageSize: 10,
            },
            searvhValue: ''
        }
    },
    onShow() {
        this.params.pageNum = 1
        this.list = []
        this.getList()
    },
    onReachBottom() {
        //滚动到底翻页
        console.log('滚动到底翻页');
        this.getList()
    },
    onPullDownRefresh() {
        this.params.pageNum = 1
        this.params.pageSize = 10
        setTimeout(function () {
            uni.stopPullDownRefresh()
        }, 1000)
        this.list = []
        this.getList()
    },
    methods: {
        search() {
            this.params.pageNum = 1
            this.params.pageSize = 10
            // setTimeout(function () {
            //     uni.stopPullDownRefresh()
            // }, 1000)
            this.list = []
            this.getList()
            console.log(this.searvhValue);
        },
        getList() {
            uni.showLoading({
                mask: true,
            })
            this.$asynApi.hotlineList({ ...this.params, windowName: this.searvhValue }).then((res) => {
                uni.hideLoading()
                if (res.code === 200 && res.rows) {
                    let list = res.rows
                    if (this.params.pageNum == 1) {
                        this.list = list
                    }
                    else {
                        this.list.push(...list)
                    }
                    if (list.length === 0 && this.params.pageNum !== 1) {
                        uni.showToast({
                            icon: 'none',
                            title: '没有更多数据了',
                        })
                    } else {
                        this.params.pageNum++
                    }
                }
            })
        },
        toPage(url) {
            uni.navigateTo({
                url,
            })
        },
        makePhoneCallM(value) {
            uni.makePhoneCall({
                phoneNumber: value
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.telephone {
    .topBox {
        background: url("../static/addFromTop.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 50rpx 30rpx 50rpx;
        image {
            width: 150rpx;
            height: 150rpx;
            opacity: 0.8;
        }
        color: #fff;
        font-weight: 600;
        font-size: 40rpx;
        font-style: italic;
    }
    .phoneBox {
        padding: 40rpx;
        .listBox {
            .phoneItem {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 40rpx 20rpx 40rpx 20rpx;
                // margin-bottom: 25rpx;
                background-color: #fff;
                border-bottom: 1rpx solid rgb(240, 240, 240);
                .textBox {
                    width: calc(100% - 76rpx - 200rpx);
                    view:nth-child(1) {
                        border-left: #4c87f3 5rpx solid;
                        padding-left: 26rpx;
                        line-height: 1;
                        color: #000;
                        font-size: 28rpx;
                    }
                    view:nth-child(2) {
                        // border-left: #4c87f3 6rpx solid;
                        padding-left: 30rpx;
                        line-height: 1;
                        color: #999;
                        margin-top: 20rpx;
                        font-size: 26rpx;
                    }
                }
                .circleArrow {
                    width: 55rpx;
                    height: 55rpx;
                }
            }
        }
    }
}
</style>